<template>
  <div class="top_box">
      <div class="top_main">
          <div class="logo">
            <img src="../../assets/logo.png" alt="">
          </div>
          <div class="nav_bar">
              <ul>
                  <li>
                      <el-dropdown>
                        <span class="el-dropdown-link">
                            分类<span><img src="../../assets/images/mor.png" alt=""></span>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="classify">
                                <el-dropdown-item v-for="(item,index) in nav_list" :key="index">
                                    <router-link :to="{name:'Classify',query:{photo_type_id:item.id,photo_type_name:item.name}}">{{item.name}}</router-link>
                                </el-dropdown-item>  
                        </el-dropdown-menu>
                        </el-dropdown>
                  </li>
                  <li>
                      <router-link :to="{name:'Classify',query:{photo_type_id:36,photo_type_name:'4K专区'}}">4K专区</router-link>
                  </li>
                  <li>
                      <router-link :to="{name:'Classify',query:{photo_type_id:26,photo_type_name:'动漫'}}">动漫</router-link>
                  </li>
                  <li>
                      <router-link :to="{name:'Classify',query:{photo_type_id:15,photo_type_name:'小清新'}}">小清新</router-link>
                  </li>
                  <li>
                      <router-link :to="{name:'Classify',query:{photo_type_id:9,photo_type_name:'风景'}}">风景</router-link>
                  </li>
                  <li>
                      <router-link :to="{name:'Classify',query:{photo_type_id:10,photo_type_name:'炫酷'}}">炫酷</router-link>
                  </li>
              </ul>
          </div>
          <div class="search_box">
              <input type="text" placeholder="请输入关键词" v-model="search_con" @keyup.enter="toSearchPage">
              <div class="search_btn">
                  <img src="../../assets/images/search.png" alt="" @click="toSearchPage">
              </div>
          </div>
      </div>
      
  </div>
  
</template>

<script>
export default {
    data() {
        return {
            nav_list:[],
            search_con:''
        }
    },
    
    methods:{
        toSearchPage(){
            if(this.search_con===''){
                alert('请输入关键词！')
            }else{
                this.$router.push({
                path:'/search',
                query:{
                    kw:this.search_con
                }
            })
            }
            
            
        }
    },
    mounted(){
        var url='https://realwds-api.vercel.app/360/getAllCategories'
        this.$axios.get(url)
        .then(res=>{
            // console.log(res.data.data.data);
            this.nav_list=res.data.data.data
        })
    }
}
</script>

<style scoped>
    .top_box{
        width: 100%;
        height: 60px;
        background: #262626;
    }
    .top_main{
        width: 1200px;
        min-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .logo{
        width: 100px;
        float: left;
    }
    .logo img{
        width: 100%;
        height: 60px;
        vertical-align: middle;
    }
    .nav_bar{
        float: left;
        
    }
    .nav_bar img{
        width: 15px;
        height: 15px;
        vertical-align: middle;
        margin-left: 5px;
    }
    .nav_bar ul{
        display: flex;
        flex-direction: row;
    }
    .nav_bar li{
        color: #fff;
        line-height: 60px;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        cursor: pointer;
        display: block;
    }
    .nav_bar li:hover{
        background: #3e3e3e;
    }
    .nav_bar li a{
        font-size: 14px;
        color: #fff;
        line-height: 60px;
        text-decoration: none;
    }
    .search_box{
        position: absolute;
        right: 0;
        top: 12px;
        
    }
    .search_box input{
        width: 250px;
        height: 36px;
        padding: 5px 25px 5px 10px;
        box-sizing: border-box;
        outline: none;
        border-radius: 5px;
        background-color: #f4f4f4;
        border: none;
    }
    .search_btn{
        position: absolute;
        top: 5px;
        right: 5px;
    }
    .search_box img{
        width: 25px;
        height: 25px;
        cursor: pointer;
    }
    .el-dropdown-link{
        color: #fff;
    }
    .classify{
        width: 180px;
        background-color: #3e3e3e;
        border: none;
    }
    .classify a{
        color: #aaa;
        text-decoration: none;
    }
    .classify a:hover{
        color: #fff;
    }
    .el-dropdown-menu__item:not(.is-disabled):hover{
        background-color: #3e3e3e;
        color: #fff;
    }
    
</style>